<template>
  <div>
    <!--    模糊搜索框区域-->
    <el-card class="box-card" style="height: 70px">
      <el-form
        :inline="true"
        :model="searchForm"
        ref="searchForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username" placeholder="请输入用户名">
          <el-input
            size="small"
            type="text"
            v-model="searchForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="手机号"  prop="phoneNumber">
          <el-input
            size="small"
            type="text"
            v-model="searchForm.phoneNumber"
            autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" size="small" @click="search">搜索</el-button>
          <el-button @click="resetForm('searchForm')">重置</el-button>
          <el-button type="success"  @click="openUnitDialog">添加</el-button>
          <el-button size="small" type="danger" @click="exportExcel">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 弹窗区域 -->
    <el-dialog :title="title" width="30%" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form :model="userMessage" label-width="70px">
        <el-form-item label="用户名" >
          <el-input v-model="userMessage.username" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="密码" >
          <el-input v-model="userMessage.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userMessage.phoneNumber" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="家庭档案" >
          <el-input v-model="userMessage.familyArchive" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="收货地址" >
          <el-input v-model="userMessage.shippingAddress" autocomplete="off"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>

        <el-button type="primary" @click="editUserMessage">确 定</el-button>
      </div>
    </el-dialog>
<!--    表格区域-->
    <el-card class="box-card">
      <el-table
        :data="userList"
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <!-- 复选框,默认会有事件handleSelectionChange -->
        <el-table-column
          type="selection">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号">
          <template slot-scope="scope">
            {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="70%">
        </el-table-column>
        <el-table-column
          prop="phoneNumber"
          label="手机号码">
        </el-table-column>
        <el-table-column
          prop="registrationTime"
          label="注册时间">
        </el-table-column>
        <el-table-column
          prop="familyArchive"
          label="家庭档案">
        </el-table-column>
        <el-table-column
          prop="shippingAddress"
          label="收货地址">
        </el-table-column>

        <el-table-column
          prop="accountStatus"
          label="账号状态">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.accountStatus == '1' ? 'primary' : 'success'"
              disable-transitions>
              {{ scope.row.accountStatus == '1' ? '在线' : '不在线' }}
            </el-tag>
          </template>
        </el-table-column>


        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑
            </el-button>
            <!-- handleEdit是事件处理用户点击按钮时,会调用这个函数-->
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
            </el-button>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[ 8, 9, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </el-card>
  </div>
</template>
<script>
import { getList,addUser,updateUser,deleteUser} from '@/api/user_list/userList';


export default {
  name: "unit",
  data() {
    return {

      userList: [],
      searchForm: {
        username: "",
        phoneNumber: "",
        accountStatus:""
      },
      pageNum: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      title: "添加用户",
      userMessage: {
        username: "", // 用户名
        password: "", // 密码
        phoneNumber: "", // 手机号码
        familyArchive: "", // 家庭档案
        shippingAddress: "", // 收货地址

      },
      multipleSelection: [], // 多选框
    }
  },
  methods: {

    // 模糊搜索
    search() {
      this.pageNum = 1;
      this.getUserList();
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getUserList();
    },
    // 分页
    handleSizeChange(size) {
      this.pageSize = size;
      this.getUserList();
    },
    // 页码
    handleCurrentChange(currentPage) {
      this.pageNum = currentPage;
      this.getUserList();
    },
    // 获取单位列表
    getUserList() {
      getList({
        username: this.searchForm.username,
        phoneNumber: this.searchForm.phoneNumber,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        console.log(res);
        // res.data取出的是pageinfo对象，里面包含了分页信息和数据list
        this.userList = res.data.list;
        this.total = res.data.total;
      });
    },


    // 添加或者编辑单位
    editUserMessage() {
      if(this.title === "添加用户"){
        // 执行添加
        addUser(this.userMessage).then((res) =>{
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.userMessage = {};
          this.getUserList();
        }).catch(() => {
          this.$message.error("添加失败");
        });
      }else if(this.title === "编辑用户"){
        // 执行编辑
        console.log(this.userMessage);
        updateUser(this.userMessage).then((res) => {
          this.$message.success("编辑成功");
          this.dialogVisible = false;
          this.userMessage = {};
          this.getUserList();
        }).catch((err) => {
          console.log(err);
          this.$message.error("编辑失败");
        });
      }
    },
    // 打开弹窗
    openUnitDialog() {
      this.dialogVisible = true;
      this.userMessage = {
        username: "", // 用户名
        phoneNumber: "", // 手机号码
        registrationTime: "", // 注册时间
        familyArchive: "", // 家庭档案
        shippingAddress: "", // 收货地址
        accountStatus: "" // 账号状态
      };
    },
    // 编辑单位
    handleEdit(row) {
      this.dialogVisible = true;
      this.title = "编辑用户";
      this.userMessage = row;
    },
    // 删除单位
    handleDelete(row) {
      if(row.username === "admin"){
        this.$message.error("不能删除admin用户");
        return;
      }

      this.$confirm("确认删除该单位吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        console.log(row);
        deleteUser({id:row.userId}).then(res => {
          this.$message.success("删除成功");
          this.getUserList();
        });
      }).catch(() => {
        this.$message.info("已取消删除");
      });
    },

    // 处理用户选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.userIds = val.map(item => item.id);
    },
    exportExcel() {
      this.$confirm("确认导出用户信息吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
      window.location.href = "http://localhost:8888/user/export";
      }).catch(() => {
        this.$message.info("已取消导出");
      });
    }
  },
  created() {
    this.getUserList();
  }
}
</script>
<style scoped>
.box-card {
  margin-top: 20px;
}
.demo-ruleForm {
  margin-bottom: 20px;
}
.dialog-footer {
  text-align: right;
  padding: 10px 10px 0;
}
</style>
